<template>
  <!-- 角色列表 -->
  <div class="roles">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>角色列表</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="content">
      <el-button type="primary" @click="dialogFormVisible = true"
        >添加角色</el-button
      >
      <!-- 表格 -->
      <el-table
        :data="tableData"
        @current-change="handleCurrentChange"
        style="width: 100%"
        border
      >
        <!-- 展开列 -->
        <el-table-column type="expand">
          <template slot-scope="scope">
            <!-- 一级权限 -->
            <el-row
              v-for="item in scope.row.children"
              :key="item.id"
              class="tr"
            >
              <el-col class="td" :span="5">
                <el-tag
                  @close="td(item, scope.row.id)"
                  effect="dark"
                  type=""
                  closable
                  >{{ item.authName }}</el-tag
                >
                <i class="el-icon-caret-right i"></i>
              </el-col>
              <!-- 二级权限和三级权限 -->
              <el-col class="td_x">
                <el-row
                  v-for="item1 in item.children"
                  :key="item1.id"
                  class="tr_x"
                >
                  <el-col :span="5" class="left">
                    <el-tag @close="td(item1, scope.row.id)" effect="dark" closable type="success">
                      {{ item1.authName }}
                    </el-tag>
                    <i class="el-icon-caret-right i"></i>
                  </el-col>
                  <!-- 三级权限 -->
                  <el-col :span="19" class="right">
                    <el-tag
                    @close="td(item2, scope.row.id)"
                      class="right"
                      effect="dark"
                      type="warning"
                      closable
                      v-for="item2 in item1.children"
                      :key="item2.id"
                    >
                      {{ item2.authName }}
                    </el-tag>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </template>
        </el-table-column>
        <!-- 表格 -->
        <el-table-column type="index" width="50" label="#"> </el-table-column>
        <el-table-column
          property="roleName"
          label="角色名称"
          width=""
        ></el-table-column>
        <el-table-column
          property="roleDesc"
          label="角色描述"
          width=""
        ></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-edit"
              @click="edit(scope.row)"
              >编辑</el-button
            >
            <el-button
              @click="delItem(scope.row.id)"
              size="mini"
              type="danger"
              icon="el-icon-delete"
              >删除</el-button
            >
            <el-button
              @click="power(scope.row.id)"
              size="mini"
              type="warning"
              icon="el-icon-setting"
              >分配权限</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- =================添加角色====================================== -->
      <el-dialog title="添加角色" :visible.sync="dialogFormVisible">
        <el-form :model="item_s" :rules="rules">
          <el-form-item
            prop="roleName"
            label="角色名称"
            :label-width="formLabelWidth"
          >
            <el-input v-model="item_s.roleName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item
            prop="roleDesc"
            label="角色描述"
            :label-width="formLabelWidth"
          >
            <el-input v-model="item_s.roleDesc" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="Add">确 定</el-button>
        </div>
      </el-dialog>
      <!-- =================编辑角色====================================== -->
      <el-dialog title="角色" :visible.sync="dialogFormVisible1">
        <el-form :model="item_ss" :rules="rules">
          <el-form-item
            prop="roleName"
            label="角色名称"
            :label-width="formLabelWidth"
          >
            <el-input v-model="item_ss.roleName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item
            prop="roleDesc"
            label="角色描述"
            :label-width="formLabelWidth"
          >
            <el-input v-model="item_ss.roleDesc" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible1 = false">取 消</el-button>
          <el-button type="primary" @click="edits">确 定</el-button>
        </div>
      </el-dialog>
      <!-- ===============================删除================================== -->
      <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
        <div class="box">
          <div class="warning">!</div>
          <span>此操作将永久删除该角色，是否继续？</span>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="del">确 定</el-button>
        </span>
      </el-dialog>
      <!-- ===========================分配权限==================================== -->
      <el-dialog title="分配权限" :visible.sync="dialogVisible1" width="30%">
        <!-- 结构树 -->
        <el-tree
          :default-checked-keys="defaults"
          :default-expanded-keys="defaultss"
          ref="tree"
          node-key="id"
          :data="powerData"
          show-checkbox
          :props="defaultProps"
          @check="getCurrentKey"
        >
        </el-tree>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible1 = false">取 消</el-button>
          <el-button type="primary" @click="bcrid">确 定</el-button>
        </span>
      </el-dialog>
      <!-- ===============================删除 td ================================== -->
      <el-dialog title="提示" :visible.sync="dialogVisible2" width="30%">
        <div class="box">
          <div class="warning">!</div>
          <span>此操作将永久删除该角色，是否继续？</span>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible2 = false">取 消</el-button>
          <el-button type="primary" @click="powerDel">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
 
<script>
import { All } from "../../utils/API";
export default {
  name: "roles",
  data() {
    return {
      // 数据渲染
      tableData: [],
      // 打开关闭弹出框
      dialogFormVisible: false,
      dialogFormVisible1: false,
      dialogVisible: false,
      dialogVisible1: false,
      dialogVisible2:false,
      // 添加角色
      item_s: {
        roleName: "",
        roleDesc: "",
      },
      // 编辑完准备提交的数据
      item_ss: {},
      // 获得删除角色的ID
      ID: "",
      // 弹框的像素
      formLabelWidth: "120px",
      // 校验
      rules: {
        roleName: [
          { required: true, message: "不能为空!!", trigger: "blur" },
          {
            min: 3,
            max: 10,
            message: "长度在 3 到 10 个字符",
            trigger: "blur",
          },
        ],
        roleDesc: [
          { required: true, message: "不能为空!!", trigger: "blur" },
          {
            min: 3,
            max: 10,
            message: "长度在 3 到 10 个字符",
            trigger: "blur",
          },
        ],
      },
      // 权限数据
      powerData: [],
      // 结构树数据绑定结构
      defaultProps: {
        children: "children",
        label: "authName",
      },
      // 获取到的权限数据
      rid: "",
      // 获取角色id
      id: Number,
      // 获取默认值
      defaults: [],
      // 获取默认展开
      defaultss: [],
      // 展开列的角色id
      roleId:Number,
      // 展开列的权限id
      rightId:''
    };
  },
  mounted() {
    this.distribution();
  },
  methods: {
    handleCurrentChange(val) {
      this.currentRow = val;
    },
    // 封装渲染数据
    async distribution() {
      // 拿默认参数
      let res = await All("/roles", {}, "GET");
      console.log(res.data.data);
      this.tableData = res.data.data;
    },
    // 添加角色
    async Add() {
      let res = await All("/roles", this.item_s, "POST");
      this.distribution();
      this.dialogFormVisible = false;
      console.log(res);
    },
    // 打开编辑弹框
    edit(item) {
      this.dialogFormVisible1 = true;
      this.item_ss = JSON.parse(JSON.stringify(item));
    },
    // 编辑角色信息
    async edits() {
      this.dialogFormVisible1 = false;
      let res = await All(
        `roles/${this.item_ss.id}`,
        { roleName: this.item_ss.roleName, roleDesc: this.item_ss.roleDesc },
        "PUT"
      );
      this.distribution();
    },
    // 获取删除角色的ID
    delItem(id) {
      this.ID = id;
      this.dialogVisible = true;
    },
    // 删除角色信息
    async del() {
      let res = await All(`roles/${this.ID}`, {}, "delete");
      this.dialogVisible = false;
      this.distribution();
    },
    // 获取所有权限并打开弹框
    async power(id) {
      let arr = [];
      let arrs = [];
      let res = await All(`rights/tree`, {}, "GET");
      this.powerData = res.data.data;
      this.dialogVisible1 = true;
      this.id = id;
      // 循环拿id
      console.log(id);
      // 第一层循环
      this.tableData.forEach((ele, index) => {
        if (ele.id === id) {
          // 第二层循环
          ele.children.forEach((ele1) => {
            // 第三层循环
            ele1.children.forEach((ele2) => {
              ele2.children.forEach((ele3) => {
                arr.push(ele3.id);
                arrs.push(ele2.id);
              });
            });
          });
        }
      });
      this.defaults = arr;
      this.defaultss = Array.from(new Set(arrs));
    },
    // 获取权限key
    getCurrentKey(ele, arr) {
      this.rid =
        arr.halfCheckedKeys.join(",") + "," + arr.checkedKeys.join(",");
    },
    // 保存权限
    async bcrid() {
      let res = await All(
        `roles/${this.id}/rights`,
        { rids: this.rid },
        "POST"
      );
      this.dialogVisible1 = false;
      this.distribution();
    },
    // 删除角色指定权限
    async powerDel() {
      this.dialogVisible2 = false
      let res = await All(`/roles/${this.roleId}/rights/${this.rightId}`,{},"delete");
      this.distribution()
    },
    //tag tb 弹出框
    td(item, id) {
      this.dialogVisible2 = true
      this.roleId = id
      this.rightId = item.id
    },
  },
};
</script>
 
<style lang = "scss" scoped>
.roles {
  width: 100%;
  height: 100%;
  background-color: #eaedf1;
  .el-breadcrumb {
    line-height: 50px;
    text-indent: 1em;
  }
  .content {
    width: 95%;
    background-color: white;
    box-sizing: border-box;
    padding: 20px;
    margin: 0 auto;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15) !important;
  }
  .tr {
    display: flex;
    align-items: center;
    border: 1px solid #ebeef5;
    .td {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .td_x {
      border-left: 1px solid #ebeef5;
      .tr_x {
        border-bottom: 1px solid #ebeef5;
        display: flex;
        align-items: center;
        padding: 10px 10px;
        .left {
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .right {
          display: flex;
          align-items: center;
        }
        .right span {
          margin: 0 10px;
        }
      }
    }
    .i {
      margin-left: 10px;
    }
  }
  .box {
    display: flex;
    align-items: center;
    .warning {
      margin-right: 10px;
      width: 25px;
      line-height: 25px;
      background-color: #e6a23c;
      border-radius: 50%;
      color: white;
      text-align: center;
    }
  }
}
</style>